import React, { useState } from 'react';
import { Flex, Layout, Tooltip, Button, Input, Space, Radio, Typography } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone, InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
const { Title } = Typography;
const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 70,
  paddingInline: 48,
  lineHeight: '64px',
  backgroundColor: 'light gray',
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  maxHeight: 400,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: 'light gray',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: 'light gray',
};

const footerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: 'light gray',
};

const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: 'calc(50% - 8px)',
  maxWidth: 'calc(67% - 20px)',
};

const imgStyle: React.CSSProperties = {
  display: 'block',
  width: 546,
};

const App: React.FC = () => {
  const [passwordVisible, setPasswordVisible] = React.useState(false);
  const [value, setValue] = useState(1);
  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  return (
    <>
      <br />
      <br />
      <br />
      <br />
      <br />
      <Flex gap="middle" wrap justify={'center'} align={'center'}>
        <Layout style={layoutStyle}>
          <Sider width="50%" style={siderStyle}>
            <img
              alt="avatar"
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              style={imgStyle}
            />
          </Sider>
          <Layout>
            <Header style={headerStyle}>
              <Title level={2} type='warning'>账号登陆</Title>
            </Header>
            <Content style={contentStyle}>
              <Space.Compact direction="vertical">
                <Input size="large" placeholder="input account" prefix={<UserOutlined />} />
                <Space direction="vertical" size="small">
                  <Input.Password
                    size="large"
                    placeholder="input password"
                    iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                  />
                </Space>
                <Radio.Group onChange={onChange} value={value}>
                  <Radio value={1}>支持人员</Radio>
                  <Radio value={2}>测试人员</Radio>
                </Radio.Group>
                <Space direction="vertical" size="small">
                  <Button type="primary">登录</Button>
                </Space>
                <Flex gap="small" wrap justify='center' align='flex-start'>
                  <Button type="link">没有账号？注册一个！</Button>
                </Flex>
              </Space.Compact>
              <br />
              <br />
            </Content>
            <Footer style={footerStyle}>Footer</Footer>
          </Layout>
        </Layout>
      </Flex>
    </>
  )
};

export default App;